<template>
  <a-modal
    :width="1000"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="modalVisible = false"
    :mask-closable="false"
  >
    <template #title> {{ props.title }}</template>
    <div v-show="props.isMark === 1 || props.isMark === 3">
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="库位编号：">
              <a-input v-model="form.number" placeholder="请输入库位编号..." />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="库位名称:">
              <a-input v-model="form.name" placeholder="请输入库位名称..." />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="warehouseType" label="库位类型：">
              <a-select v-model="form.warehouseType">
                <a-option
                  v-for="item in classificationData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="指定物料：">
              <a-select v-model="form.materialId" @change="changeMaterial">
                <a-option
                  v-for="item in materialData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="库位规格：">
              <a-space>
                <a-input-number
                  :min="1"
                  v-model="form.long"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 长 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.wide"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 宽 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.high"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 高 </template>
                </a-input-number>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="最大称重量：">
              <a-input-number
                :min="1"
                v-model="form.weight"
                :hide-button="true"
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-col :span="24">
          <a-form-item field="number" label="所在位置：">
            <a-textarea
              v-model="form.location"
              placeholder="请输入所在位置..."
              allow-clear
            />
          </a-form-item>
        </a-col>

        <a-col :span="24"
          ><a-form-item field="number" label="备注：">
            <a-textarea
              v-model="form.remark"
              placeholder="请输入备注..."
              allow-clear
            />
          </a-form-item>
        </a-col> </a-form
    ></div>
    <br />
    <div v-show="props.isMark === 2">
      <a-form ref="formRefs" :model="form" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="库位编号：">
              <a-input
                disabled
                v-model="form.number"
                placeholder="系统自动生成..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="name" label="库位名称:">
              <a-input
                disabled
                v-model="form.name"
                placeholder="系统自动生成..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="库位规格：">
              <a-space>
                <a-input-number
                  :min="1"
                  v-model="form.long"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 长 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.wide"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 宽 </template>
                </a-input-number>
                <a-input-number
                  :min="1"
                  v-model="form.high"
                  :hide-button="true"
                  allow-clear
                >
                  <template #append> 高 </template>
                </a-input-number>
              </a-space>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="最大称重量：">
              <a-input-number
                :min="1"
                v-model="form.weight"
                :hide-button="true"
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="warehouseType" label="库位类型：">
              <a-select v-model="form.warehouseType">
                <a-option
                  v-for="item in classificationData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="指定物料：">
              <a-select v-model="form.materialId" @change="changeMaterial">
                <a-option
                  v-for="item in materialData"
                  :key="item.id"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="货架属性：">
              <a-input
                v-model="form.attribute"
                :hide-button="true"
                disabled
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="所在位置：">
              <a-input
                v-model="form.location"
                :hide-button="true"
                disabled
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="number" label="货架格数：">
              <a-input-number
                :min="1"
                v-model="form.lattice"
                :hide-button="true"
                disabled
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="number" label="货架层数：">
              <a-input-number
                :min="1"
                v-model="form.tier"
                :hide-button="true"
                disabled
                placeholder="请输入最大称重量..."
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-col :span="24"
          ><a-form-item field="number" label="备注：">
            <a-textarea
              v-model="form.remark"
              placeholder="请输入备注..."
              allow-clear
            />
          </a-form-item>
        </a-col> </a-form
    ></div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { cloneDeep } from 'lodash';
  import { reactive, computed, watchEffect, onMounted, ref, watch } from 'vue';
  import {
    GetMaterialList,
    PostMaterialList,
    DelMaterialList,
    DelClassificationList,
  } from '@/api/inventory-management/material-management';
  import { GetClassificationList } from '@/api/inventory-management/material-management/index';
  import { getWarehouseType } from '@/api/inventory-management/warehouse-management/warehouse-list/index';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';
  // 获取人员信息数据
  const PersonnelData = ref();
  const Getuserlist = async () => {
    try {
      const res = await GetPersonnelinformation({
        page: 10,
        size: -1,
      });
      PersonnelData.value = res.content.data;
    } catch (err: unknown) {
      console.log(err);
    }
  };
  Getuserlist();

  const classificationData = ref();
  const ClassificationList = async () => {
    const res = await getWarehouseType({ page: 10, size: -1, type: 3 });
    classificationData.value = res.content;
  };
  ClassificationList();

  const formRefs = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
      formData: any;
      title: string;
      isMark: number;
    }>(),
    {
      visible: false,
    }
  );

  const materialData = ref();
  const getData = async () => {
    let res = await GetMaterialList({ page: 1, size: -1 });
    materialData.value = res.content;
  };
  getData();
  // 获取产品分类
  const fieldNames = { value: 'id', label: 'name' };
  // const classificationData: any = ref();
  // const ClassificationList = async () => {
  //   const res = await GetClassificationList({});
  //   classificationData.value = res;
  // };
  // ClassificationList();

  let form = ref({
    id: undefined,
    pid: undefined,
    name: '', //库位名称
    number: '', //库位编号
    materialTypeId: undefined, //物品存放类型id
    materialId: undefined, // 指定存放物料id
    materialName: '',
    long: undefined, //长
    wide: undefined, //宽
    high: undefined, //高
    shelvesId: undefined, //所属货架id
    warehouseId: undefined, //所属仓库id
    weight: undefined, // 最大承重量
    location: '', //所在位置
    mark: 3, // 标识:1.仓库2.货架3.库位
    remark: '',
    state: 1,
    lattice: undefined,
    tier: undefined,
    warehouseType: undefined,
  });

  const emit = defineEmits(['update:visible', 'addLocationForm']);

  const handleOk = () => {
    emit('addLocationForm', form.value);
  };

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const changeMaterial = (val: any) => {
    const res = materialData.value.filter((i: any) => i.id === val);
    form.value.materialId = res[0].id;
    form.value.materialName = res[0].name;
  };

  watchEffect(() => {
    if (modalVisible.value) {
      // form.name = '';
      form.value = cloneDeep(props.formData);
      // if (props.createId) {
      //   console.log(props.createId);
      //   form.value.pid = props.createId;
      // }
    }
  });
</script>

<style scoped lang="less"></style>
